<template>
  <div class="box">
    <div class="f1">
      <ul v-show="status != 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <div class="icon2"></div>
          </div>
          <span>财税数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组36.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
      <!-- 从列表进入进度条 -->
      <ul v-show="status == 'lbzs'">
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组30.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span style="margin-left: -10px">企业认证</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组33.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>填写申请信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组35.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>上传申请资料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/组37.png" alt="" />
            <div class="icon2 zssq"></div>
          </div>
          <span>财税数据授权</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/PC/金融服务/005.png" alt="" />
          </div>
          <span>业务提交完成</span>
        </li>
      </ul>
    </div>
    <div class="f2">
      <div class="content">
        <!-- <div class="title">
          <h6></h6>
          税务信息采集
        </div> -->
        <div class="f2_content">
          <div class="f2_form">
            <el-form :model="form" label-width="150px" :rules="rules">
              <el-form-item label="纳税人识别号" prop="a">
                <el-input @blur="submitBtns" v-model="form.a"></el-input>
              </el-form-item>
              <el-form-item label="企业名称" prop="d">
                <el-input @blur="submitBtns" v-model="form.d"></el-input>
              </el-form-item>
              <el-form-item label="法人手机号" prop="b">
                <el-input v-model="form.b" @blur="b"></el-input>
                <div class="timer">
                  <span v-if="time == 30" @click="getAuthCode(time, form.b)"
                    >获取验证码</span
                  >
                  <!---->
                  <span v-else>{{ time }}秒后重新获取</span>
                </div>
              </el-form-item>
              <el-form-item label="手机验证码" prop="c">
                <el-input @blur="submitBtns" v-model="form.c"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 服务协议 -->
        <div class="agreement">
          <img
            @click="submitBtn()"
            v-if="radio"
            src="@/assets/PC/金融服务/组38.png"
            alt=""
          />
          <img
            @click="submitBtn()"
            v-else
            src="@/assets/PC/金融服务/组39.png"
            alt=""
          />
          <span> 阅读并同意 </span>
          <a @click="submitBtn()">《授权协议》</a>
        </div>
        <div class="btn">
          <!-- <button class="last" @click="lastStep">上一步</button> -->
          <button @click="lastStep" :disabled="isLock" class="next btn3">
            上一步
          </button>
          <button class="next" :disabled="isLock" @click="nextStep">
            下一步
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch, smsSend } from "@/utils";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      status: "", //判断是从列表进入还是从表格进
      radio: false,
      time: 30,
      isLock: false,
      disabled: false,
      loading: false,
      btn: false,
      coopid: "",
      productcode: "",
      productid: "",
      productname: "",
      ProductList: null,
      form: {
        a: "",
        b: "",
        c: "",
        d: "",
      },

      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        c: [{ required: true, message: " ", trigger: "blur" }],
        d: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },
  // 生命周期方法
  mounted() {
    this.status = this.$route.query.status;
  },
  methods: {
    // 登录手机号验证
    b() {
      let value = Number(this.form.b);
      if (this.form.b == "") return this.submitBtns();
      this.form.b = value.toFixed(0);
      let reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.form.b)) {
        this.form.b = "";
        this.submitBtns();
        return;
      }
      this.submitBtns();
    },
    // 获取验证码
    async getAuthCode(time, phoneno) {
      // if (phoneno == "") return ElMessage.error("请输入手机号");
      // let reg = /^1[3-9]\d{9}$/;
      // if (!reg.test(phoneno))
      //   return ElMessage.error("验证码发送失败请检查手机号");
      // let data = await smsSend(phoneno);
      // // if (data.msg == "ok") {
      //   ElMessage.success("验证码发送成功");
      //   this.code = true;
      //   if (time != 30) {
      //     return;
      //   }
      //   let times = setInterval(() => {
      //     time--;
      //     this.time = time;
      //     if (this.time == -1) {
      //       clearInterval(times);
      //       this.time = 30;
      //     }
      //   }, 1000);
      //   return;
      // // }
      // // ElMessage.error("验证码发送失败请检查手机号");
      ElMessage.success("验证码发送成功");
      this.code = true;
      if (time != 30) {
        return;
      }
      let times = setInterval(() => {
        time--;
        this.time = time;
        if (this.time == -1) {
          clearInterval(times);
          this.time = 30;
        }
      }, 1000);
      return;
    },
    // 上一页
    lastStep() {
      this.$router.go(-1);
    },
    // 产品申请第1步
    async nextStep() {
      this.status
        ? this.$router.push(
            `/gsebzsApply4?taxidnum=${this.form.a}&entname=${this.form.d}&status=lbzs`
          )
        : this.$router.push(
            `/gsebzsApply4?taxidnum=${this.form.a}&entname=${this.form.d}`
          );

      return;
      this.isLock = true;
      setTimeout(() => {
        this.isLock = false;
      }, 3000);
      // if (!this.btn) return;
      this.loading = true;
      if (this.form.a == "" || this.form.b == "" || this.form.c == "")
        return ElMessage.error("请输入内容");
      let url = "/api/pros/empower";
      let params = {
        productcode: this.productcode,
        productid: this.productid,
        productname: this.productname,
        coopid: this.coopid,
        taxidnum: this.form.a,
        phone: this.form.b,
        code: this.form.c,
      };
      // let data = await myPostFetch(url, params);
      // if (data.code == 100) {
      let type = localStorage.getItem("type");
      if (type == 2 || type == 3) {
        this.$router.push("/flow7");
      } else if (type == 1 || type == 4) {
        this.$router.push(
          `/flow5-1?taxidnum=${this.form.a}&entname=${this.form.d}`
        );
      }
      this.loading = false;
      return;
      // }
      this.loading = false;
    },
    //submitBtn
    submitBtn() {
      this.radio = !this.radio;
      this.submitBtns();
    },
    submitBtns() {
      if (
        this.form.a != "" &&
        this.form.b != "" &&
        this.form.c != "" &&
        this.form.d != "" &&
        this.radio
      ) {
        this.btn = true;
      } else {
        this.btn = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.box {
  box-sizing: border-box;
  padding-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 20px;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 40px;
        .icon {
          display: flex;
          align-items: center;
          .icon1 {
            width: 40px;
          }
          .icon2 {
            width: 180px;
            height: 3px;
            background-color: #dbdbdb;
            margin: 0 8px;
          }
          .zssq {
            width: 110px;
          }
        }
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -19px;
          margin-top: 3px;
        }
      }
    }
  }
  .f2 {
    box-sizing: border-box;
    padding: 40px 80px;
    margin: 0 auto;
    width: 1200px;

    .content {
      box-sizing: border-box;
      padding: 30px 20px 50px 20px;
      margin: 0 auto;
      width: 1023px;
      height: 100%;
      .f2_content {
        box-sizing: border-box;
        padding: 40px 130px;
      }
      .title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
      }
      .f2_form {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: -77px;
        .timer {
          height: 40px;
          position: absolute;
          right: 20px;
          top: 0;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #3f6ef2;
          cursor: pointer;
          user-select: none;
          // background-color: #f00;
        }
      }
      // 服务协议
      .agreement {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 25px;
        text-align: center;
        margin-top: 10px;
        user-select: none;
        span {
          font-size: 14px;
          color: #666;
          margin-left: 7px;
        }
        img {
          width: 15px;
          height: 15px;
          cursor: pointer;
        }
        a {
          cursor: pointer;
          font-size: 14px;
          color: #3f6ef2;
        }
      }
      // 按钮
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 50px;
        .last {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          opacity: 0.3;
          border-radius: 4px;
        }
        .next {
          width: 160px;
          height: 36px;
          background: #0a7be0;
          border-radius: 4px;
        }
        .btn3 {
          background-color: #ccc;
        }
        button {
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 5px;
          width: 180px;
          height: 50px;
          color: #fff;
          margin-left: 30px;
          border: 0;
        }
      }
    }
  }
}
/* 输入框样式  */
::v-deep(.el-input__inner) {
  box-sizing: border-box;
  width: 450px;
  height: 39px;
  font-size: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}
::v-deep(.el-form-item) {
  margin-bottom: 18px;
}
::v-deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
::v-deep(.el-form-item) {
  margin-bottom: 22px;
}
</style>
